<template>
<div>
	<div class="login-container">
	<el-form autoComplete="on" :model="loginForm" :rules="loginRules"
		ref="loginForm" label-position="left" label-width="0px"
		class="card-box login-form">
	<div class="login_parent" aria-flowto="center">
		<div class="tittle">
			<h3 class="title">
				<img :src="loginimage" alt="login"> 运维管理系统
			</h3>
			<!--运维管理系统-->
		</div>
		<div class="login">
			<el-form-item prop="userName"> <span
				class="svg-container"> <icon-svg icon-class="jiedianyoujian"></icon-svg>
			</span> <el-input name="userName" type="text" v-model="loginForm.userName"
				autoComplete="on" placeholder="用户名"></el-input> </el-form-item>
			<el-form-item prop="password"> <span
				class="svg-container"> <icon-svg icon-class="mima"></icon-svg>
			</span> <el-input name="password" type="password"
				@keyup.enter.native="handleLogin" v-model="loginForm.password"
				autoComplete="on" placeholder="密码"></el-input> </el-form-item>
			<el-form-item> <el-button type="primary"
				style="width:40%;" :loading="loading"
				@click.native.prevent="handleLogin"> 登录 </el-button>
			 <el-button type="primary"
				style="width:40%;" :loading="loading"
				@click.native.prevent="dialogVisible=true"> 忘记密码 </el-button>
				
				</el-form-item>				
		</div>
		<div class="login_parent_right">
			<img :src="tittleimg" alt="头像" width="180px" height="180px">
		</div>
	</div>
	</el-form>
		</div>
	<el-dialog title="申请找回账号密码" size="tiny" :visible.sync="dialogVisible"> 
		<forget-pwd></forget-pwd>
	</el-dialog>
</div>
</template>

<script>
	import loginimage from '@/assets/login_images/login.png';
	import tittleimg from '@/assets/login_images/tittle.png';
	export default {
		name : 'login',
		data () {
			return {
				loginimage ,
				tittleimg ,
				dialogVisible: false,
				loginForm : {
					userName : 'sys_admin',
					password : '123456'
				},
				loginRules : {
					userName : [
						{
							required : true,
							trigger : 'blur',
							message: '请填写用户名'
						}
					],
					password : [
						{
							required : true,
							trigger : 'blur',
						}
					]
				},
				loading : false
			}
		},

		methods : {
			handleLogin () {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true;
						this.$store.dispatch('Login', this.loginForm).then(() => {
							this.loading = false;
							this.$router.push({
								path : '/'
							});
						}).catch(() => {
							this.loading = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		// forgetPasswd() {
		//      this.$store.dispatch('ForgetPwd').then(()=>{
		//           this.$router.push({ path: '/login/forgetPwd' });
		//      })
		// }
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
@import "src/styles/mixin.scss";

.tips {
	font-size: 14px;
	color: #fff;
	margin-bottom: 5px;
}

.login-container { @include relative;
	height: 100vh;
	background-color: #2d3a4b;
	input: -webkit-autofill{
        -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
	-webkit-text-fill-color: #fff !important;
}

input {
	background: transparent;
	border: 0px;
	-webkit-appearance: none;
	border-radius: 0px;
	padding: 12px 5px 12px 15px;
	color: #eeeeee;
	height: 47px;
}

.el-input {
	display: inline-block;
	height: 47px;
	width: 85%;
}

.svg-container {
	padding: 6px 5px 6px 15px;
	color: #889aa4;
}

.title {
	font-size: 30px;
	font-weight: 500px;
	color: #eeeeee;
	margin: 0px auto 40px auto;
	text-align: left;
	font-weight: bold;
}

.login-form {
	position: absolute;
	left: 0;
	right: 0;
	width: 400px;
	padding: 35px 35px 15px 35px;
	margin: 120px auto;
}

.el-form-item {
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	color: #454545;
}

.forget-pwd {
	color: #fff;
}

.login_parent {
	width: 150%
}

.login {
	width: 70%;
	float: left;
}

.login_parent_right {
	left: 110px;
	width: 30%;
	float: right
}

.tittle {
	width: 100%;
	float: left;
}
}
</style>
